<template>
    <div class="login">
        <el-row>
            <el-col :span="12">
            </el-col>
            <el-col :span="12" :xs="24">
                <div class="login-content">
                    <h1 style="color: white; font-size: 40px;">Hello</h1>
                    <h2 style="color: white; margin-bottom: 7px;">欢迎来到小威甄选</h2>
                    <!-- form表单 -->
                    <el-form style="width: 100%" :model="formData" :rules="rules" ref="ruleFormRef">
                        <!-- 用户名字项 -->
                        <el-form-item prop="username">
                            <el-input v-model="formData.username" type="text">
                                <template #prefix>
                                    <el-icon>
                                        <UserFilled />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <!-- 用户密码项 -->
                        <el-form-item prop="password">
                            <el-input type="password" v-model="formData.password" :show-password="true">
                                <template #prefix>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" style="width: 100%;" @click="loginRequestEvent">登录</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup name="login">
// 引入form数据
import { ref, reactive } from 'vue'
// 导入userinfo小仓库
import { useInfo } from "@/store/data.ts"
// 导入路由，路由器 
import { useRoute, useRouter } from "vue-router"
import { ElNotification } from 'element-plus'
const $useRoute = useRoute()
const $useRoutr = useRouter()
const $useInfo = useInfo()
const formData = reactive({
    username: "admin",
    password: "111111"
})
// 校验规则的制定
const rules = {
    username: [
        { required: true, message: "用户名不能为空", trigger: 'blur' },
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: 'blur' },
        { min: 6, message: '密码至少六位', trigger: 'blur', required: true }

    ],
}
const ruleFormRef = ref()
async function loginRequestEvent() {
    await ruleFormRef.value.validate()
    try {
        await $useInfo.useLoginRequest(formData)
        ElNotification({
            title: 'Success',
            message: '登录成功',
            type: 'success',
        })
        $useRoutr.replace("/")
    } catch (err) {
        ElNotification({
            title: 'Error',
            message: '登录失败',
            type: 'error',
        })
    }
}
</script>
<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    background: url("../../assets/images/background.jpg") no-repeat;
    background-size: cover;

    .login-content {
        padding: 0 20px;
        position: relative;
        background-color: rgba(69, 101, 202, .5);
        width: 768px;
        height: 232px;
        top: 250px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
}
</style>